<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>任务2.3掌握Bootstrap组件的添加：css组件(表单、输入框组、图标)</title>
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <!-- 引入jQuery -->
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
<div>
    <!--输入框组-->
    <div class="input-group">
        <input type="text" class="form-control" placeholder="">
        <span class="input-group-addon">
            百度一下
        </span>
    </div>
    <br/>
    <div class="input-group">
        <span class="input-group-addon">￥</span>
        <input type="text" class="form-control">
        <span class="input-group-addon">.00</span>
    </div>
    <br/>
    <!--    图标-->
    <div class="input-group">
        <span class="input-group-addon">
            <span class="glyphicon glyphicon-earphone"></span>
        </span>
        <input class="form-control col-lg-2" type="text">
    </div>
    <span class="glyphicon glyphicon-asterisk"></span>
    <span class="glyphicon glyphicon-plus"></span>
    <span class="glyphicon glyphicon-euro"></span>
    <span class="glyphicon glyphicon-minus"></span>
    <span class="glyphicon glyphicon-cloud"></span>
    <span class="glyphicon glyphicon-envelope"></span>
    <span class="glyphicon glyphicon-pencil"></span>
    <span class="glyphicon glyphicon-glass"></span>
    <br>
    <span class="glyphicon glyphicon-minus"></span>
    <span class="glyphicon glyphicon-search"></span>
    <span class="glyphicon glyphicon-header"></span>
    <span class="glyphicon glyphicon-star"></span>
    <span class="glyphicon glyphicon-star-empty"></span>
    <span class="glyphicon glyphicon-user"></span>
    <span class="glyphicon glyphicon-film"></span>
    <span class="glyphicon glyphicon-th-large"></span>
    <br>
    <span class="glyphicon glyphicon-th"></span>
    <span class="glyphicon glyphicon-th-list"></span>
    <span class="glyphicon glyphicon-ok"></span>
    <span class="glyphicon glyphicon-remove"></span>
    <span class="glyphicon  glyphicon-zoom-in"></span>
    <span class="glyphicon glyphicon-zoom-out"></span>
    <span class="glyphicon glyphicon-off"></span>
    <span class="glyphicon glyphicon-signal"></span>
</div>
</body>
</html>